<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我们结婚啦~！</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="swiper/swiper-bundle.min.css" />
    <link rel="stylesheet" href="swiper/animate.min.css" />
    <link rel="stylesheet" href="css/atom.css">
    <style>
        body{ background-color:#fff; color:#444;}
        .swiper-container{ height: 100%; width: 100%; position: fixed; left:0; top:0; z-index:0 }

        .swiper-slide {

        }
        .runAnimation {
            animation-play-state: running !important;
        }
        .stopAnimation {
            animation-play-state: paused !important;
        }
        @keyframes rotateRound {
            0% {
                transform: rotateZ(0deg);
            }
            100% {
                transform: rotateZ(360deg);
            }
        }

        .xin_ani_group{ position: relative;}
        .xin_ani_group .xin_item{ position: absolute; left:0; top:0; z-index: 1; width: 50vw; opacity:.1;animation:go }
        @keyframes go {
            0%{ transform:scale(0) ; opacity:0; }
            50%{ transform:scale(1.5) ; opacity:.5; }
            100%{ transform:scale(10) ; opacity:0; }
        }

        .ani{animation-timing-function:ease-in-out}

        .imgBaseStyleContain{ object-fit: contain; object-position:center center; width: 100%; height:100% }
        .imgBaseStyleCover{ object-fit: cover;  width: 100%; height:100% }

        /*transform: rotate3d(0,1,0,180deg)*/

        @keyframes apple_ani_zoom_1 {
            0% {
                opacity: 0;
                transform: scale3d(3, 3, 3) translate3d(0, 0, 0) ;
            }

            30% {
                opacity: 1;
                transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
                /*animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);*/
            }
            70% {
                opacity: 1;
                /*transform: scale3d(1.5, 1.5, 1.5) translate3d(0, 0, 0);*/
            }
            100% {opacity: 0; transform: scale3d(2, 2, 2) translate3d(0,40vw, 0); }
        }
        .apple_ani_zoom_1 {
            animation-name: apple_ani_zoom_1;
            animation-timing-function: ease-in-out;
        }
        @keyframes apple_ani_zoom_end {
            0% {
                opacity: 0;
                transform: scale3d(3, 3, 3) translate3d(0, 50vw, 0) ;
            }

            30% {
                opacity: 1;
                transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
                /*animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);*/
            }
            100% {
                opacity: 1;
                transform: scale3d(1.1, 1.1, 1.1) translate3d(0, 0, 0);
                /*animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);*/
            }
        }
        .apple_ani_page1_end{
            animation-name: apple_ani_zoom_end;
            animation-timing-function: ease-in;
        }

        /*  第3页  */
        @keyframes apple_ani_zoom_3 {
            0% {
                opacity: 0;
                transform: scale3d(3, 3, 3) translate3d(0, 0, 0);
            }
            50% {
                opacity: 1;
                transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
                /*animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);*/
            }
        }
        .apple_ani_zoom_3 {
            animation-name: apple_ani_zoom_3;
            animation-timing-function: ease-in-out;
        }

        @keyframes apple_ani_page3_end {
            0% {
                opacity: 0;
                transform: scale3d(3, 3, 3) translate3d(0, 50vw, 0) ;
            }
            50% {
                opacity: 1;
                transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
                /*animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);*/
            }
        }
        .apple_ani_page3_end {
            animation-name: apple_ani_page3_end;
            animation-timing-function: linear;
        }

        @keyframes apple_ani_zoom_2 {
            0% {
                opacity: 0;
                transform: scale3d(3, 3, 3) translate3d(0, 0, 0) ;
            }

            30% {
                opacity: 1;
                transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
                /*animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);*/
            }
            70% {
                opacity: 1;
                /*transform: scale3d(1.5, 1.5, 1.5) translate3d(0, 0, 0);*/
            }
            100% {opacity: 0; transform: scale3d(2, 2, 2) translate3d(0,-40vw, 0); }
        }
        .apple_ani_zoom_2 {
            animation-name: apple_ani_zoom_2;
            animation-timing-function: ease-in-out;
        }

        @keyframes apple_ani_zoom_5 {
            0% {
                opacity: 0;
                transform: scale3d(0.8, 0.8, 0.8) translate3d(0, 100vw, 0) ;
            }

            30% {
                opacity:1;
                transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
                /*animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);*/
            }

            100% {opacity: 0; transform: scale3d(1.5, 1.5, 1.5) translate3d(100vw,0,0); }
        }
        .apple_ani_zoom_5 {
            animation-name: apple_ani_zoom_5;
            animation-timing-function: ease-in-out;
        }

        @keyframes apple_ani_zoom_5_1 {
            0% {
                opacity: 0;
                transform: scale3d(0.8, 0.8, 0.8) translate3d(-50vw,0, 0) ;
            }

            30% {
                opacity:1;
                transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
                /*animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);*/
            }

            100% {opacity: 0; transform: scale3d(1.5, 1.5, 1.5) translate3d(-100vw,0,0); }
        }
        .apple_ani_zoom_5_1 {
            animation-name: apple_ani_zoom_5_1;
            animation-timing-function: ease-in-out;
        }

        .swiper-pagination-bullet-active{ background:rgba(255,255,255,.7);}


    </style>
</head>
<body id="bodyBox">
    <div id="app" v-cloak class="swiper-container">
        <audio id="bgm" src="images/bgm.mp3" loop hidden></audio>
        <div class="fixed z_index_10" style="top:4vw; right:4vw" @click="bgmToggle">
            <img :class="isMusicPlay?'runAnimation':'stopAnimation'" src="https://res.maka.im/cdn/maka/release/music_icon.png?32fb85122f139626cd4982d113498ac8" style="width:8vw; height:8vw; display: block; z-index: 1000000; transform-origin: center center; animation: 5s linear 0s infinite normal forwards running rotateRound;  touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
        </div>
        <div class="swiper-wrapper">
            <div class="swiper-slide bg_red" style="background-image: url(images/buling-white.gif); background-repeat: no-repeat;background-size: 100% 100%;">
                <div style="position:absolute; left:50%; top:50%; z-index: 1; transform:translate(-50%, -50%)">
                <div style="width:20vw;" class="ani" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s"><img src="images/one-wo.png" class="imgBaseStyleContain"></div>
                <div style="width:20vw;" class="ani" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0.6s"><img src="images/one-men.png" class="imgBaseStyleContain"></div>
                <div style="width:20vw;" class="ani" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0.9s"><img src="images/one-jie.png" class="imgBaseStyleContain"></div>
                <div style="width:20vw;" class="ani" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.5s" swiper-animate-delay="1.1s"><img src="images/one-hun.png" class="imgBaseStyleContain"></div>
                <div style="width:20vw;" class="ani" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.5s" swiper-animate-delay="1.4s"><img src="images/one-la.png" class="imgBaseStyleContain"></div>
                </div>
                <div id="buLing" class="buling" style=" position: absolute; left:0; top:0; z-index: 5; width: 100%; height: 100%;"></div>
            </div>

            <!-- 01  -->

            <div class="swiper-slide bg_white">
                 <div class="absolute top_0 left_0 w_100 h_100 z_index_10">
                    <img src="images/buling-white.gif" class="imgBaseStyleCover">
                </div>
                <div class="absolute top_0 left_0 w_100 h_100 z_index_0 ani" swiper-animate-effect="apple_ani_zoom_1" swiper-animate-duration="10s" swiper-animate-delay="0.1s" >
                    <img src="images/xc/b-07.jpg" class="imgBaseStyleCover">
                </div>
               <div class="absolute top_0 left_0 w_100 h_100 z_index_0 ani" swiper-animate-effect="apple_ani_page1_end" swiper-animate-duration="8s" swiper-animate-delay="8s" >
                    <img src="images/xc/b-05.jpg" class="imgBaseStyleCover">
                </div>
            </div>

            <!-- 02  -->
            <div class="swiper-slide bg_red">
                <div class="absolute top_0 left_0 w_100 h_100 z_index_10">
                    <img src="images/buling-red.gif" class="imgBaseStyleCover">
                </div>

                <div class="absolute z_index_0  ani" style="left:8vw; top:10vw; border:2vw solid #fff; width:80vw; height:80vw; transform: rotate(-15deg);" swiper-animate-effect="zoomIn" swiper-animate-duration="3s" swiper-animate-delay="0.1s" >
                    <img src="images/xc/h-02.jpg" class="imgBaseStyleCover">
                </div>

                <div class="absolute z_index_0  ani" style="left:8vw; top:90vw; border:2vw solid #fff; width:80vw; height:55vw; transform: rotate(15deg);" swiper-animate-effect="zoomIn" swiper-animate-duration="3s" swiper-animate-delay="2.3s" >
                    <img src="images/xc/h-03.jpg" class="imgBaseStyleCover">
                </div>

            </div>

            <!-- 03  -->
            <div class="swiper-slide bg_white">
                <div class="absolute top_0 left_0 w_100 h_100 z_index_100">
                    <img src="images/buling-white.gif" class="imgBaseStyleCover">
                </div>
                <div class="absolute top_0 left_0 w_100 h_100 z_index_0 ani" swiper-animate-effect="apple_ani_zoom_3" swiper-animate-duration="6s" swiper-animate-delay="0.1s" >
                    <img src="images/xc/b-01.jpg" class="imgBaseStyleCover">
                </div>
                <div class="absolute z_index_10  ani" style="left:34%; top:32%; width:28vw; height:28vw; transform: rotate(-12.5deg);" swiper-animate-effect="apple_ani_page3_end" swiper-animate-duration="3s" swiper-animate-delay="3s" >
                    <img src="images/xc/b-01-2.jpg" class="imgBaseStyleCover">
                </div>
                <div class="absolute z_index_10 ani" style="left:49%; top:64%; width:29vw; height:29vw; transform: rotate(38deg);" swiper-animate-effect="apple_ani_page3_end" swiper-animate-duration="3s" swiper-animate-delay="3.5s" >
                    <img src="images/xc/b-01-1.jpg" class="imgBaseStyleCover">
                </div>
            </div>

            <!-- 04  -->
            <div class="swiper-slide bg_red">
                <div class="absolute top_0 left_0 w_100 h_100 z_index_100">
                    <img src="images/buling-red.gif" class="imgBaseStyleCover">
                </div>

                <div class="absolute z_index_0 left_0 top_0 w_100 h_100  ani" style="" swiper-animate-effect="apple_ani_zoom_2" swiper-animate-duration="6s" swiper-animate-delay="0.1s" >
                    <img src="images/xc/h-01.jpg" class="imgBaseStyleCover">
                </div>

              <div class="absolute z_index_0 left_0 top_0 w_100 h_100  ani" style="" swiper-animate-effect="apple_ani_zoom_3" swiper-animate-duration="6s" swiper-animate-delay="5s" >
                    <img src="images/xc/h-06.jpg" class="imgBaseStyleCover">
              </div>

                <div class="absolute z_index_10  ani" style="left:8vw; bottom:10vw; border:2vw solid #fff; width:80vw; height: 48vw; transform: rotate(10deg)" swiper-animate-effect="apple_ani_page3_end" swiper-animate-duration="5s" swiper-animate-delay="7s" >
                    <img src="images/xc/h-05.jpg" class="imgBaseStyleCover">
                </div>
            </div>


            <!-- 05  -->
            <div class="swiper-slide bg_white">
                <div class="absolute top_0 left_0 w_100 h_100 z_index_10">
                    <img src="images/buling-white.gif" class="imgBaseStyleCover">
                </div>
                <div class="absolute top_0 left_0 w_100 h_100 z_index_0 ani" swiper-animate-effect="apple_ani_zoom_1" swiper-animate-duration="6s" swiper-animate-delay="0.1s" >
                    <img src="images/xc/b-03.jpg" class="imgBaseStyleCover">
                </div>

                <div class="absolute top_0 left_0 w_100 h_100 z_index_0 ani" swiper-animate-effect="apple_ani_zoom_1" swiper-animate-duration="6s" swiper-animate-delay="4s" >
                    <img src="images/xc/b-06.jpg" class="imgBaseStyleCover">
                </div>

                <div class="absolute top_0 left_0 w_100 h_100 z_index_0 ani" swiper-animate-effect="apple_ani_zoom_1" swiper-animate-duration="6s" swiper-animate-delay="8s" >
                    <img src="images/xc/b-04.jpg" class="imgBaseStyleCover">
                </div>

               <div class="absolute top_0 left_0 w_100 h_100 z_index_0 ani" swiper-animate-effect="apple_ani_page1_end" swiper-animate-duration="6s" swiper-animate-delay="12s" >
                   <img src="images/xc/b-02.jpg" class="imgBaseStyleCover">
               </div>
            </div>

            <!-- 06  -->
            <div class="swiper-slide bg_red">
                <div class="absolute top_0 left_0 w_100 h_100 z_index_100">
                    <img src="images/buling-red.gif" class="imgBaseStyleCover">
                </div>

                <div class="absolute z_index_0 left_0 top_0 w_100 h_100  ani" style="" swiper-animate-effect="apple_ani_zoom_1" swiper-animate-duration="8s" swiper-animate-delay="0.1s" >
                    <img src="images/xc/h-04.jpg" class="imgBaseStyleCover">
                </div>

                <div class="absolute z_index_0 left_0 top_0 w_100 h_100  ani" style="" swiper-animate-effect="apple_ani_zoom_3" swiper-animate-duration="6s" swiper-animate-delay="7s" >
                    <img src="images/xc/h-07.jpg" class="imgBaseStyleCover">
                </div>

            </div>


            <!--   end  -->
            <div class="swiper-slide bg_red" style="background-image: url(images/buling-red.gif); background-repeat: no-repeat;background-size: 100% 100%;">
                <div style="position:absolute; left:50%; top:10%; z-index: 1; transform:translate(-50%, 0)">
                    <div class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s"><span class="color_fff" style="font-size:12vw">一</span></div>
                    <div class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0.6s"><span class="color_fff " style="font-size:12vw">起</span></div>
                    <div class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0.9s"><span class="color_fff " style="font-size:12vw">见</span></div>
                    <div class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s" swiper-animate-delay="1.1s"><span class="color_fff " style="font-size:12vw">证</span></div>
                    <div class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="1.4s"><span class="color_fff " style="font-size:12vw">幸</span></div>
                    <div class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s" swiper-animate-delay="1.7s"><span class="color_fff " style="font-size:12vw">福</span></div>
                </div>
                <div style="position: absolute; bottom:10vw; left:50%; z-index: 1; transform: translate(-50%,0);">
                    <div class="text_center ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.0s" swiper-animate-delay="2.0s" style="color:#fff; font-size:5vw;">河南 • 平顶山</div>
                    <div class="text_center ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.0s" swiper-animate-delay="2.5s" style="color:#fff; font-size:4vw;">2021.04.19</div>
                </div>

            </div>
        </div>

        <div class="swiper-pagination"></div>

    </div>

</body>
<script src="js/vue.min.js"></script>
<script src="swiper/swiper-bundle.min.js"></script>
<script src="swiper/swiper.animate1.0.3.min.js"></script>
<script scr="js/jweixin-1.6.0.js"></script>
<script src="js/particles.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data:function(){
            return{
                initTouchNum:0,
                isMusicPlay:false, // 是否正在播放
            }
        },
        methods:{
            touchOne(){
                if(this.initTouchNum>=1){
                    return;
                }
                var audio = document.querySelector('#bgm');
                audio.play();  // 播放
                this.isMusicPlay=true;
                this.initTouchNum++;
            },
            bgmToggle(){
                var audio = document.querySelector('#bgm');
                if (audio.paused){
                    audio.play();  // 播放
                    this.isMusicPlay=true;
                } else {
                    audio.pause();// 暂停
                    this.isMusicPlay=false;
                }
            },
        },
        mounted:function(){

            var mySwiper = new Swiper ('.swiper-container', {
                pagination: {
                    el: '.swiper-pagination',
                    dynamicBullets: true,
                },
                initialSlide :0,
                direction : 'vertical',
                effect : 'fade',
                fadeEffect: {
                    crossFade: true,
                },
                on:{
                    init: function(){
                        swiperAnimateCache(this); //隐藏动画元素
                        swiperAnimate(this); //初始化完成开始动画
                    },
                    slideChangeTransitionEnd: function(){
                        swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
                        //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
                    }
                }
            })

            document.addEventListener("WeixinJSBridgeReady",()=>{
                document.querySelector('#bgm').play();
                this.isMusicPlay=true;
            }, false);

            document.addEventListener("touchend",()=>{
                this.touchOne();
            },false)

            this.$nextTick(()=>{
               // this.bgmToggle();

            })

        }
    })


    particlesJS('buLing',
        {
            "particles": {
                "number": {
                    "value": 50,
                    "density": {
                        "enable": true,
                        "value_area": 1000
                    }
                },
                "color": {
                    "value": "#ffffff"
                },
                "shape": {
                    "type": "image",
                    "stroke": {
                        "width": 0,
                        "color": "#000000"
                    },
                    "polygon": {
                        "nb_sides": 5
                    },
                    "image": {
                        "src": "images/xin.png",
                        "width": 100,
                        "height": 100
                    }
                },
                "opacity": {
                    "value": 0.4,
                    "random": true,
                    "anim": {
                        "enable": true,
                        "speed": 1,
                        "opacity_min": 0.1,
                        "sync": false
                    }
                },
                "size": {
                    "value":20,
                    "random": true,
                    "anim": {
                        "enable": false,
                        "speed": 40,
                        "size_min": 0.1,
                        "sync": false
                    }
                },
                "line_linked": {
                    "enable": false,
                    "distance": 150,
                    "color": "#ffffff",
                    "opacity": 0.4,
                    "width": 1
                },
                "move": {
                    "enable": true,
                    "speed": 2,
                    "direction": "none",
                    "random": true,
                    "straight": false,
                    "out_mode": "bounce",
                    "attract": {
                        "enable": false,
                        "rotateX": 300,
                        "rotateY": 300
                    }
                }
            },
            "interactivity": {
                "detect_on": "canvas",
                "events": {
                    "onhover": {
                        "enable": false,
                        "mode": "repulse"
                    },
                    "onclick": {
                        "enable": true,
                        "mode": "repulse"
                    },
                    "resize": true
                },
                "modes": {
                    "grab": {
                        "distance": 400,
                        "line_linked": {
                            "opacity": 1
                        }
                    },
                    "bubble": {
                        "distance": 400,
                        "size": 40,
                        "duration": 2,
                        "opacity": 8,
                        "speed": 3
                    },
                    "repulse": {
                        "distance": 200
                    },
                    "push": {
                        "particles_nb": 4
                    },
                    "remove": {
                        "particles_nb": 2
                    }
                }
            },
            "retina_detect": true,
            "config_demo": {
                "hide_card": false,
                "background_color": "#b61924",
                "background_image": "",
                "background_position": "50% 50%",
                "background_repeat": "no-repeat",
                "background_size": "cover"
            }
        }
    );
</script>
</html>
